let secDom = document.querySelector('.second')
let minDom = document.querySelector('.minute')
let hourDom = document.querySelector('.hour')
let Inp1Dom = document.querySelector('.Inp1')
let styles = document.querySelector('.styles')
// 获取现在的时分秒
let timerId = setInterval(function () {
	let timer = new Date()
	let tHour = timer.getHours()
	let tMin = timer.getMinutes()
	let tSec = timer.getSeconds()
	// 将其可视化
	// 秒针可视化,当前秒数应旋转多少度
	let secDeg = 360 / 60 * tSec
	secDom.style.transform = `rotate(${secDeg}deg)`
	// 分针可视化,当前分数应旋转多少度
	let minDeg = 360 / 60 * tMin
	minDom.style.transform = `rotate(${minDeg}deg)`
	// 时钟可视化，当前小时应旋转多少度
	let hourDeg = 360 / 12 * tHour
	hourDom.style.transform = `rotate(${hourDeg}deg)`
}, 1000)

//获取当前输入的内容
/* 
oninput与onpropertychange失效的情况：
 oninput事件：1. 在脚本中改变value时，不会触发；2.从浏览器的自动下拉提示中选取时，不会触发
*/
if ('oninput' in Inp1Dom) {
	Inp1Dom.addEventListener('input', throttle(getWord, 1000), false)
} else {
	Inp1Dom.onpropertychange = getWord;
}

function getWord() {
	styles.innerHTML = Inp1Dom.value
	console.log(Inp1Dom.value);
}

//可以加入一个节流函数 否则输入就会运行出来
function throttle(callBack, time) {
	// callBack: 传入的回调函数
	// time: 定时器的第二个参数（多长时间触发）
	// 节流阀的状态（默认开启）
	let valve = true
	return function () {
		// 如果节流阀处于关闭状态，则不执行里面代码
		if (valve) {
			// 关闭节流阀（在里面代码没执行完之前，不能进入）
			valve = false
			// 开启定时器
			setTimeout(() => {
				// 通过 apply 改变传入的回调函数 callBack 的 this 指向
				// 通过 arguments 拿到外层函数的事件对象（箭头函数没有 this 指向）
				// 注意：事件处理函数只能有一个形参（拿到事件对象），
				// 如果要传多个参数，方法:在外面封装一个函数，在事件处理函数中调用
				callBack.apply(this, arguments)
				// 当回调函数执行完，开启节流阀（可以执行进入里面执行传入的回调函数了）
				valve = true
			}, time)
		}
	}
}